<template>
    <div class="card-wrapper" :style="{ width, height }">
        <slot name="title"></slot>
        <span v-if="!$slots['title']" class="card-title">{{ title }}</span>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
interface Props {
    title?: string
    width?: string
    height?: string
}
const props = withDefaults(defineProps<Props>(), {
    width: '100%',
    height: '100px',
})
</script>

<style lang="scss" scoped>
.card-wrapper {
    border: none;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
    padding: 20px;
    box-shadow: var(--el-box-shadow-lighter);
    transition: all 0.3s;

    &:hover {
        box-shadow: var(--el-box-shadow);
    }

    .card-title {
        font-size: 18px;
        font-weight: bold;
        color: gray;
    }
}
</style>
